<template>
	<div class="p-6 space-y-6">

		<el-tabs v-model="activeTab">
			<el-tab-pane label="资料管理" name="profile">
				<el-table :data="profiles" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="卖家名称" />
					<el-table-column prop="contact" label="联系方式" />
					<el-table-column prop="location" label="所在地" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="交易模式（上架管理）" name="listing">
				<el-table :data="listings" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="price" label="价格" />
					<el-table-column prop="status" label="状态" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="供需匹配" name="matching">
				<el-table :data="matches" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="buyer" label="买家" />
					<el-table-column prop="quantity" label="需求量" />
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('profile')

const profiles = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: `卖家${i + 1}`,
	contact: `1380000${1000 + i}`,
	location: ['北京', '上海', '深圳', '广州', '成都'][Math.floor(Math.random() * 5)]
})))

const listings = ref(Array.from({ length: 10 }).map(() => ({
	product: ['EUV光刻胶', 'G线光刻胶', '蚀刻液', '去胶剂', '清洗剂'][Math.floor(Math.random() * 5)],
	price: (Math.random() * 5000 + 500).toFixed(2),
	status: ['上架中', '已下架'][Math.floor(Math.random() * 2)]
})))

const matches = ref(Array.from({ length: 10 }).map(() => ({
	product: ['EUV光刻胶', 'G线光刻胶', '蚀刻液', '去胶剂', '清洗剂'][Math.floor(Math.random() * 5)],
	buyer: ['华为', '中兴', '京东方', '台积电', '长江存储'][Math.floor(Math.random() * 5)],
	quantity: Math.floor(Math.random() * 100) + 1
})))
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
